<template>

    <div>

        <header class="container header">
            <top-cmp></top-cmp>
            <div class="nav">
                <router-link to="/" tag="div" class="icon"></router-link>
                <!-- <div class="icon"></div> -->
                <div class="font">全部项目</div>
            </div>

            <div class="lists">

                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper ul">
                        <div class="swiper-slide" :class="index == current ? 'con' : ''" v-for="(item,index) in list"
                            :key="index" @click="add(index)">
                            <span>{{ item }}</span>
                        </div>
                    </div>
                </div>


                <div class="status_list">
                    <div>全部状态</div>
                    <div>最新上线</div>
                </div>
            </div>
        </header>
        <div class="body container" v-if="current==0">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==1">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">1{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==2">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">2{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==3">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">3{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==4">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">4{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==5">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">5{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==6">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">6{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==7">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">7{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==8">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">8{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>

        <div class="body container" v-if="current==9">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">9{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>
        <div class="body container" v-if="current==10">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <ul>
                    <li v-for="(item, index) in listData" :key="index">
                        <div class="img"><img :src="item.img1" alt=""></div>
                        <div class="projectItemUserInfo">
                            <div class="icon"><img :src="item.img2" alt=""></div>
                            <p class="name">{{ item.name }}</p>
                            <div class="tag">{{ item.tag }}</div>
                            <div class="tag">{{ item.tag1 }}</div>
                        </div>
                        <div class="projectItemTitle">10{{ item.title }}</div>

                        <div class="projectItemStatus">
                            <p>{{ item.num }}</p>
                            <p>{{ item.time }}</p>
                        </div>
                    </li>
                </ul>
            </van-list>

        </div>
    </div>
</template>

<script>
import topCmp from "../components/topCmp.vue"
import Swiper from 'swiper'
export default {


    data() {
        return {
            list: ["全部", "游戏", "动漫", "出版", "全部", "游戏", "动漫", "出版", "全部", "游戏", "动漫",],
            current: 0,
            // 内容
            listData: [
                {
                    id: 1,
                    img1: require("../assets/img/slide.jpg"),
                    img2: require("../assets/img/1.jpg"),
                    name: 'HM珠宝设计工作室',
                    tag: '设计',
                    tag1: '预热',
                    title: '沉香手串｜清闻甘凉｜再品乳香｜尾韵醇厚',
                    num: '7人看好',
                    time: '2022-10-29 20:00开始'
                },
                {
                    id: 2,
                    img1: require("../assets/img/slide.jpg"),
                    img2: require("../assets/img/1.jpg"),
                    name: 'HM珠宝设计工作室',
                    tag: '设计',
                    tag1: '预热',
                    title: '沉香手串｜清闻甘凉｜再品乳香｜尾韵醇厚',
                    num: '7人看好',
                    time: '2022-10-29 20:00开始'
                },
                {
                    id: 3,
                    img1: require("../assets/img/slide.jpg"),
                    img2: require("../assets/img/1.jpg"),
                    name: 'HM珠宝设计工作室',
                    tag: '设计',
                    tag1: '预热',
                    title: '沉香手串｜清闻甘凉｜再品乳香｜尾韵醇厚',
                    num: '7人看好',
                    time: '2022-10-29 20:00开始'
                },
            ],
            loading: false,
            finished: false,
        };
    },
    methods: {
        add(index) {
            this.current = index;
            console.log(this.current);

        },
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                for (let i = 0; i < 3; i++) {
                    this.listData.push({
                    id: this.listData.length+1,
                    img1: require("../assets/img/slide.jpg"),
                    img2: require("../assets/img/1.jpg"),
                    name: 'HM珠宝设计工作室',
                    tag: '设计',
                    tag1: '预热',
                    title: '沉香手串｜清闻甘凉｜再品乳香｜尾韵醇厚',
                    num: '7人看好',
                    time: '2022-10-29 20:00开始'
                });
                }

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.listData.length >= 20) {
                    this.finished = true;
                }
            }, 1000);
        },
    },
    mounted() {
        new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 7,
            paginationClickable: true,
            spaceBetween: 30,
            freeMode: true
        });
    },
    components: {
        topCmp
    }


}
</script>

<style lang="scss">
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999;
    background-color: #fff;
}

.nav {
    height: 36px;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    margin-top: 60px;

    .icon {
        box-sizing: border-box;
        margin-left: 12px;
        width: 16px;
        height: 16px;
        background: url(../assets/img/back.png)no-repeat center center;
        background-size: 100%;
    }

    .font {
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #1a1a1a;
    }
}

.lists {
    width: 100%;
    height: 70px;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;

    .ul {
        margin-top: 4px;
        display: flex;
        white-space: nowrap;

        .swiper-slide {
            width: 40px;
            height: 25px;
            text-align: center;

            span {
                font-size: 13px;
            }

            &.con {
                border-bottom: 2px solid #818181;
            }
        }
    }

    .status_list {
        width: 100%;
        height: 30px;
        background: #fff;
        padding: 0 11px;
        display: flex;
        align-items: center;

        &>div {
            margin: 0 5px 0 0;
            width: 65px;
            height: 20px;
            background: #f2f2f2;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #1a1a1a;
            line-height: 20px;
        }
    }
}

.body {
    margin-top: 170px;

    ul {
        padding-top: 13px;

        li {
            width: 293px;
            height: 232px;
            margin: 0 auto;

            .img {
                img {
                    border-radius: 3px;
                }
            }

            .projectItemUserInfo {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .icon {
                    width: 17px;
                    height: 17px;
                }

                .name {
                    font-size: 12px;
                    margin: 0 0 0 12px;
                    color: #1a1a1a;
                    flex: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                .tag {
                    margin: 0 0 0 12px;
                    padding: 2px 3px;
                    line-height: 1;
                    font-size: 12px;
                    background-color: #ecfbfb;
                    color: #10bdb4;
                    border-radius: 3px;
                    text-align: center;
                }
            }

            .projectItemTitle {
                font-size: 14px;
                font-weight: 600;
                line-height: 14px;
                border-bottom: 2px solid #f2f2f2;
                padding: 10px 0;
            }

            .projectItemStatus {
                width: 100%;
                margin-top: 16px;
                display: flex;
                justify-content: flex-end;

                &>p {
                    display: flex;
                    align-items: center;
                    color: #7f7f7f;
                    font-size: 12px;
                    line-height: 12px;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>